<template>
  <div>
    <div id="login" v-if="wrapShow">
      <div class="wrap">
        <div class="loginInfor">
          <img src="../assets/img/text.png" alt="" style="height:37px;" />
          <p>Derun channel recording service platform</p>
        </div>
        <div class="login-form-box">
          <el-form
            ref="form"
            :model="form"
            :rules="rules"
            status-icon
            class="elForm"
          >
            <el-form-item class="item itemLeft" prop="username">
              <i>
                <img src="../assets/img/login_02.png" style="width:30px"/>
              </i>
              <el-input v-model="form.username" placeholder="用户名"></el-input>
            </el-form-item>
            <el-form-item prop="password" class="item">
              <i>
                <img src="../assets/img/login_01.png" style="width:30px"/>
              </i>
              <el-input
                v-model="form.password"
                type="password"
                placeholder="密码"
              ></el-input>
            </el-form-item>
            <el-form-item class="item itemRight">
              <span class="itemButton" type="primary" @click="login">
                登录
              </span>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import AES from "@/assets/js/AES.js";
import { apiLogin } from "../../src/assets/js/api";
export default {
  name: "Login",
  data() {
    return {
      wrapShow: true,
      formChange: {
        username: "",
        password: "",
        confirm: ""
      },
      form: {
        username: "",
        password: ""
        // check: [true]
      },
      // form: {
      //   username: "15223619139",
      //   password: "t123456"
      //   // check: [true]
      // },
      rules: {
        username: [
          // required: 非空规则
          // message: 提示信息
          // trigger: 触发的方式  blur  change
          { required: true, message: "请输入用户名", trigger: "change" },
          {
            min: 3,
            max: 12,
            message: "长度在 3 到 12 个字符",
            trigger: "change"
          }
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "change" },
          {
            min: 6,
            max: 12,
            message: "长度在 6 到 12 个字符",
            trigger: "change"
          }
        ]
      }
    };
  },
  created() {
    var that = this;
    document.onkeydown = function() {
      var key = window.event.keyCode;
      if (key == 13) {
        that.login();
      }
    };
  },
  methods: {
    async login() {
      // let password = this.$md5(this.form.password);
      // let parmas ={username:this.form.username,password:password}
      // 对表单进行校验
      // 如果校验成功了，会走resolve, 如果失败了，就走reject
      try {
        // 等待表单校验成功
        await this.$refs.form.validate();
        //开始AES加密
        let keys = "drxfdsjcomwssdbc";
        let enUsername = AES.encrypt(this.form.username, keys);
        let enPassword = AES.encrypt(this.form.password, keys);
        let encrypts = {};
        encrypts.username = enUsername;
        encrypts.password = enPassword;
        // 从成功的结果中结构出来meta 和 data
        const { code, message, data } = await apiLogin(encrypts);
        if (code === 200) {
          // 存储token
          // 跳转页面
          this.$message.success(message);
          localStorage.setItem("token", data.token);
          localStorage.setItem("approvedname", data.name);
          // localStorage.setItem("permissions", data.loginInfo.permissions);
          // localStorage.setItem("lastTime", new Date().getTime());
          //存储cookie
          this.$cookies.set("CHANNEL_TOKEN", data.token);
          this.$router.push({ path: "/index" });
          console.log(this.$router.push({ path: "/index" }));
        } else {
          this.$message.error(message);
        }
      } catch (e) {
        return false;
      }
    }
  }
};
</script>

<style scoped lang="less">
#login {
  width: 100%;
  height: 100%;
  background: url("../assets/img/login2.png") no-repeat 100% 100%;
  background-size: cover;
  background-position: center center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  .wrap {
    margin-top: -15%;
  }
}
.loginInfor {
  text-align: center;
  color: #00e0eb;
  h1 {
    font-size: 44px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: rgba(0, 224, 235, 1);
    line-height: 44px;
    letter-spacing: 22px;
  }
  p {
    font-size: 22px;
    font-family: Microsoft YaHei;
    font-weight: lighter;
    color: rgba(0, 224, 235, 1);
    line-height: 27px;
    margin-top: 27px;
    margin-bottom: 90px;
    letter-spacing: 7px;
    width: 100%;
  }
}
.login-form-box {
  width: 816px;
  height: 60px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid;
  box-shadow: 3px 4px 5px 0px rgba(0, 0, 0, 0.11);
  span {
    font-family: MicrosoftYaHei;
    font-weight: 400;
  }
}
.remember {
  float: left;
}
.elForm {
  display: flex;
  border-radius: 6px;
}
#login .el-form-item__content i {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  height: 60px;
  width: 60px;
  overflow: hidden;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}
#login .el-form-item {
  margin-bottom: unset;
}
::v-deep #login .el-input__inner {
  width: 260px;
  height: 60px;
  background: #ffffff;
  border-radius: 0px 0px 0px 0px;
  border: unset;
  color: #999999;
  font-size: 22px;
  margin:0 20px 0 62px;
  padding-right: 25px;
}
.itemButton {
  width: 130px;
  height: 60px;
  background: #3fb5e4;
  border: unset;
  cursor: pointer;
  font-size: 20px;
  color: white;
  padding: unset;
  display: inline-block;
  line-height: 60px;
  letter-spacing: 5px;
}
.iButton {
  right: 0;
  left: unset !important;
  width: 40px !important;
  background: transparent !important;
  cursor: pointer;
}
.iButton img {
  margin-top: 5px;
}
.itemLeft i,
.itemLeft ::v-deep .el-input__inner {
  // border-radius: 6px 0 0 6px;
  overflow: hidden;
}
.itemRight {
  // border-radius: 0 6px 6px 0;
  overflow: hidden;
}
.change {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center; /*垂直居中*/
  justify-content: center; /*水平居中*/
}
.changeBox {
  padding: 30px 40px 50px 30px;
  box-shadow: 0px 0px 20px #ddd;
  border-radius: 5px;
  width: 20%;
  margin: 0 auto;
}
.changePW {
  font-size: 16px;
  text-align: center;
  margin-bottom: 20px;
}
.changeForm {
  margin-bottom: 35px;
}
/deep/.el-form-item__error {
  left: 62px;
}
/deep/.el-input__suffix {
  right: 25px;
}
</style>
